<template>
    <view class="absolute bg-blackx w-full min-h-full box-border">
        <view class="p-4">
            <textarea v-model="form.content"
                class="text-whitex borderx w-full p-2 box-border rounded-2xl text-sm min-h-28 bg-blackxlight"
                :placeholder="page_config.input_placeholder" :show-confirm-bar="false"></textarea>
        </view>
        <view class="p-4">
            <view @click="showTopicPopup"
                class="w-full h-10 py-2 px-4 bg-blackxlight flex justify-between items-center rounded-2xl box-border">
                <text class="text-whitex text-sm"># {{form.tag_name||"增加话题"}}</text>
            </view>
        </view>
        <view class="p-4" v-if="!page_config.auditing">
            <view @click="showNicknamePopup"
                class="w-full h-10 py-2 px-4 bg-blackxlight flex justify-between items-center rounded-2xl box-border">
                <text class="text-whitex text-sm">{{page_config.avatar_title}}</text>
                <view v-if="avatar_nickname" class="bg-bluex rounded px-2 py-1 text-whitex text-sm">
                    {{avatar_nickname}}
                </view>
            </view>
        </view>
        <view class="w-full mt-12 box-border px-8">
            <view class="bg-bluex text-whitex font-extrabold box-border rounded-full text-center p-2" @click="publish">
                确认发布
            </view>
        </view>
        <view class="w-full mt-8 box-border px-8 text-center" v-if="page_config.coin_text">
            <text class="text-yellowx/60">{{page_config.coin_text}}</text>
        </view>
        <nicknamePopup ref="nicknamePopup" :avatar_id="form.avatar_id" @onChooseNickname="onChooseNickname">
        </nicknamePopup>
        <!-- <uv-popup ref="areaPopup" closeable round="1rem" :bgColor="blackxlight">
            <view class="h-72 px-4 py-10">
                <view class="flex justify-center w-full box-border">
                    <view class="flex flex-wrap w-full box-border">
                        <view class="box-border w-1/2 p-4 flex justify-center items-center" v-for="i in sea_list"
                            :key="i.id" @click="onSeaId(i)">
                            <view class="flex flex-col box-border w-full justify-center">
                                <image class="w-full h-12 box-border rounded-xl" :src="i.image" mode="aspectFill">
                                </image>
                                <text class="text-whitex text-center mt-2">{{i.title}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </uv-popup> -->
        <uv-popup ref="topicPopup" closeable round="1rem" :bgColor="blackxlight">
            <view class="h-72 px-4 py-10">
                <view class="flex flex-col w-full px-4 box-border">
                    <input v-model="tagForm.tag_name"
                        class="text-whitex borderx py-2 px-4 rounded-2xl text-sm bg-blackxlight"
                        placeholder="请输入你的话题" />
                </view>
                <view class="w-full box-border px-8 mt-4">
                    <view @click="storeTag()"
                        class="bg-bluex text-whitex font-extrabold box-border rounded-full text-center p-2">
                        保存话题
                    </view>
                </view>
                <view class="flex flex-wrap justify-start items-center gap-2 gap-y-2 mt-4">
                    <view @click="onChooseTag(i)" class="text-whitex px-2 py-1 text-sm rounded-md flex-grow-0"
                        :class="form.tag_id==i.id?'bg-bluex':'bg-bluex/40'" v-for="i in tag_list" :key="i.id">{{i.name}}
                    </view>
                </view>
            </view>
        </uv-popup>
        <sexPopup ref="sexPopup"></sexPopup>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors'
    import { errorCode } from '../../consts/datas'
    import {
        events
    } from '../../consts/events'
    import {
        avatarList,
        publishPageData,
        sensitive,
        sensitiveWechat,
        setNickname,
        storePost,
        storeTag,
        tagList
    } from '../../http/api'

    export default {
        data() {
            return {
                blackxlight: colors.blackxlight,
                pinkx: colors.pinkx,
                tag_list: [],
                avatar_list: [],
                sea_list: [],
                avatar_nickname: '',
                form: {
                    content: '',
                    tag_id: '',
                    tag_name: '',
                    avatar_id: 0,
                    sea_id: '',
                },
                tagForm: {
                    tag_name: '',
                },
                page_config: {
                    avatar_title: '',
                    auditing: false,
                    coin_text: '',
                    input_placeholder: "",
                },

            }
        },
        computed: {
            sea_name: function() {
                const title = this.sea_list.find(i => i.id == this.form.sea_id)?.title
                return title
            }
        },
        methods: {
            onSeaId(i) {
                this.form.sea_id = i.id
                this.$refs.areaPopup.close()
            },
            onChooseNickname(i) {
                this.form.avatar_id = i.id
                this.avatar_nickname = i.nickname
            },
            async setNickname() {
                const res = await setNickname(this.nicknameForm)
                if (res.code == 0) {
                    uni.showToast({
                        icon: "none",
                        title: res.message,
                    })
                    return
                }
                const data = res.data
                this.form.avatar_id = data.avatar_id
                this.avatar_nickname = this.nicknameForm.nickname
                this.$refs.nicknamePopup.close()
            },
            showSexPopup() {
                this.$refs.sexPopup.open("bottom")
            },
            onChooseTag(i) {
                this.form.tag_id = i.id
                this.form.tag_name = i.name
                this.$refs.topicPopup.close()
            },
            async getAvatarList() {
                const res = await avatarList()
                const data = res.data
                this.avatar_list = data.list
            },
            async getTagList() {
                const res = await tagList()
                const data = res.data
                this.tag_list = data.list
            },
            async showTopicPopup() {
                this.$refs.topicPopup.open("bottom")
                this.getTagList()
            },
            async storeTag() {
                const hit = await this.testSensitive(this.tagForm.tag_name, 'comment')
                if (hit) {
                    this.tagForm.tag_name = ""
                    return;
                }
                const res = await storeTag(this.tagForm)
                if (res.code == 0) {
                    uni.showToast({
                        icon: "none",
                        title: res.message,
                    })
                    return
                }
                this.form.tag_name = res.data.name
                this.form.tag_id = res.data.id
                this.tagForm.tag_name = ''
                this.$refs.topicPopup.close()
            },
            showNicknamePopup() {
                this.$refs.nicknamePopup.open("bottom")
                this.getAvatarList()
            },
            showAreaPopup() {
                this.$refs.areaPopup.open("bottom")
            },
            async getData() {
                const { sea_id } = this.form
                let res = await publishPageData({ sea_id });
                console.log(res);
                const data = res.data
                // this.sea_list = data.sea_list
                // this.avatar_title = data.avatar_title
                // this.auditing = data.auditing
                this.page_config = data
            },
            parseParams(e) {
                console.log(e)
                this.form.sea_id = e.sea_id ?? this.sea_id
            },
            async testSensitive(question, scene_name) {
                // #ifdef MP-WEIXIN
                const res = await sensitiveWechat({
                    question,
                    scene_name
                })
                // #endif
                // #ifndef MP-WEIXIN
                const res = await sensitive({
                    question
                })
                // #endif
                if (res.Hit) {
                    uni.showToast({
                        icon: "none",
                        title: res.message ?? "此内容不适合发布",
                    })
                }
                return res.Hit
            },
            async publish() {
                uni.showLoading({
                    mask: true,
                    title: "发布中..."
                })
                const hit = await this.testSensitive(this.form.content, 'publish')
                if (hit) {
                    uni.hideLoading()
                    this.form.content = ""
                    return;
                }
                const res = await storePost(this.form);
                if (res.code == errorCode.BalanceNotEnough) {
                    uni.showToast({
                        icon: 'none',
                        title: res.message,
                        duration: 1500,
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: res.data?.path ?? '/pages/my/my'
                        })
                    }, 1500)
                    return
                }
                if (res.code == 0) {
                    uni.showToast({
                        icon: "none",
                        title: res.message,
                    })
                    return
                }
                const data = res.data
                uni.hideLoading()
                uni.showToast({
                    icon: "none",
                    title: res.message,
                })
                uni.$emit(events.tadaSea)
                uni.navigateBack({})
            },
        },
        onLoad(e) {
            this.parseParams(e)
            this.getData()
        },
    }
</script>

<style>
    .borderx {
        @apply border border-whitex/30 border-solid;
    }
</style>